import React from 'react';
import {Button, Icon, Tooltip, message} from 'antd';
import {WeaDialog, WeaSearchGroup, WeaFormItem, WeaInput, WeaSelect, WeaBrowser, WeaHelpfulTip} from 'ecCom';
import {WeaLocaleProvider} from 'ecCom';
const getLabel = WeaLocaleProvider.getLabel;
import EField_New from './base/EField_New'
import EMoreAddress from './base/EMoreAddress'

// RSS阅读器，数据来源
class Content_1_DataSource extends React.Component {
    state = {
        id: this.props.tabData.id,
        title: this.props.tabData.title || '',
        showContent: this.props.tabData.showContent,
        position: this.props.tabData.position || this.props.tabNew.position.selected,
        searchGroup: this.props.tabData.searchGroup || this.props.tabNew.searchGroup.selected,
        readType: this.props.tabData.readType || this.props.tabNew.readType.selected,
        eFieldNewDataSource: this.props.tabData.eFieldNewDataSource || this.props.tabNew.eFieldNewDataSource,
        eFieldNewUsedKeys: this.props.tabData.eFieldNewUsedKeys || [],
        eFieldNewVisible: false,
        eMoreAddress: this.props.tabData.eMoreAddress|| '',
        eMoreShowType: this.props.tabData.eMoreShowType|| '0',
    };

    constructor(props) {
        super(props);
        this.getButtons = this.getButtons.bind(this);
        this.onOk = this.onOk.bind(this);
        this.onCancel = this.onCancel.bind(this);
    }

    render() {
        const {title, showContent, position, searchGroup, readType, eFieldNewDataSource, eFieldNewUsedKeys, eFieldNewVisible,
            eMoreAddress, eMoreShowType} = this.state;
        const {tabNew} = this.props;
        let EFieldNew = <div></div>;
        if (eFieldNewVisible) {
            const eFieldNewProps = {
                eFieldNewDataSource: _.cloneDeep(eFieldNewDataSource),
                eFieldNewUsedKeys: _.cloneDeep(eFieldNewUsedKeys),
                onOk: (data) => {
                    this.setState({
                        eFieldNewDataSource: _.cloneDeep(data.eFieldNewDataSource),
                        eFieldNewUsedKeys: _.cloneDeep(data.eFieldNewUsedKeys),
                        eFieldNewVisible: false
                    });
                },
                onCancel: () => {
                    this.setState({
                        eFieldNewVisible: false
                    });
                }
            };
            EFieldNew = <EField_New ecId={`${this && this.props && this.props.ecId || ''}_EField_New@krknyu`} {...eFieldNewProps}/>
        }
        const eFieldNewUsedNames = [];
        for (let i = 0; i < eFieldNewUsedKeys.length; i++) {
            for (let j = 0 ; j < eFieldNewDataSource.length; j++) {
                if (eFieldNewUsedKeys[i] == eFieldNewDataSource[j].key) {
                    eFieldNewUsedNames.push(eFieldNewDataSource[j].name);
                }
            }
        }
        return (
            <WeaDialog ecId={`${this && this.props && this.props.ecId || ''}_WeaDialog@7oohcu`}
                className="portal-esetting-dialog portal-rss-esetting-dialog"
                visible={true}
                title={getLabel(19480, '内容设置')}
                icon="icon-coms-portal"
                iconBgcolor='#1a57a0'
                style={{width: 660, height: 285}}
                hasScroll={true}
                buttons={this.getButtons()}
                onCancel={this.onCancel}
            >
                <WeaSearchGroup ecId={`${this && this.props && this.props.ecId || ''}_WeaSearchGroup@5iwd49`} title={getLabel(33396, '设置项')} needTigger={true} showGroup={true}>
                    <WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@f8rznx`} label={getLabel(24986, '标题')} labelCol={{span: 6}} wrapperCol={{span: 16}}>
                        <WeaInput ecId={`${this && this.props && this.props.ecId || ''}_WeaInput@f2o7zf`} inputType="multilang" isBase64={true} value={title} viewAttr={3} onChange={value => this.setState({title: value})}/>
                    </WeaFormItem>
                    <WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@obja13`} label={getLabel(15935, '显示内容')} labelCol={{span: 6}} wrapperCol={{span: 16}}>
                        <WeaInput ecId={`${this && this.props && this.props.ecId || ''}_WeaInput@rgaipm`} value={showContent} viewAttr={3} onChange={value => this.setState({showContent: value})}/>
                    </WeaFormItem>
                    <WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@k01y0r`} label={getLabel(19495, '显示字段')} labelCol={{span: 6}} wrapperCol={{span: 16}}>
                        {EFieldNew}
                        <div style={{height: '30px', lineHeight: '30px'}}>
                            <i className="icon-coms-Flow-setting portal-esetting-btn"
                               style={{position: "relative", zIndex: "12"}}
                               onClick={() => this.setState({eFieldNewVisible: true})}/>
                            <span className="pottal-element-showfield">&nbsp;&nbsp;&nbsp;&nbsp;{eFieldNewUsedNames.join('，')}</span>
                        </div>
                    </WeaFormItem>
                    <WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@dbv1os`} label={getLabel(19669, '所在位置')} labelCol={{span: 6}} wrapperCol={{span: 16}}>
                        <div style={{display: 'inline-block',
                        //  width: '150px'
                         }}>
                            <WeaSelect ecId={`${this && this.props && this.props.ecId || ''}_WeaSelect@t8kxzl`}
                                options={
                                    tabNew.position.options.map((item) => {
                                        return {key: item.key, selected: false, showname: item.value};
                                    })
                                }
                                value={position}
                                detailtype={3}
                                onChange={value => {
                                    this.setState({position: value});
                                }}
                            />
                        </div>
                        {/* <span style={{marginLeft: '10px'}}>{getLabel(19672, '显示内容为关键字时此选项才起作用')}</span> */}
                    </WeaFormItem>
                    <WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@0exsy0`} label={getLabel(24020, '查询组合')} labelCol={{span: 6}} wrapperCol={{span: 16}}>
                        <div style={{display: 'inline-block',
                        //  width: '108px'
                         }}>
                            <WeaSelect ecId={`${this && this.props && this.props.ecId || ''}_WeaSelect@vi9ogb`}
                                options={
                                    tabNew.searchGroup.options.map((item) => {
                                        return {key: item.key, selected: false, showname: item.value};
                                    })
                                }
                                value={searchGroup}
                                detailtype={3}
                                onChange={value => {
                                    this.setState({searchGroup: value});
                                }}
                            />
                        </div>
                        <div style={{paddingLeft: '8px', paddingBottom: '6px', display: 'inline-block'}}>
                            <WeaHelpfulTip ecId={`${this && this.props && this.props.ecId || ''}_WeaHelpfulTip@g2dpko`}
                                // width =  {196} //如果要自定义宽度，在这里设置
                                title={getLabel(386550, '关键字之间以空格分隔，选择 and 搜索包含全部关键词的信息；选择 or 搜索包含任意一个关键词的信息。')}
                                isCenter={true}
                            />
                        </div>
                    </WeaFormItem>
                    <WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@wy67ez`} label={getLabel(24661, '读取方式')} labelCol={{span: 6}} wrapperCol={{span: 16}}>
                        <WeaSelect ecId={`${this && this.props && this.props.ecId || ''}_WeaSelect@u52ajj`}
                            options={
                                tabNew.readType.options.map((item) => {
                                    return {key: item.key, selected: false, showname: item.value};
                                })
                            }
                            value={readType}
                            detailtype={3}
                            // style={{width: '150px'}}
                            onChange={value => {
                                this.setState({readType: value});
                            }}
                        />
                    </WeaFormItem>
                    <EMoreAddress ecId={`${this && this.props && this.props.ecId || ''}_EMoreAddress@a89dil`} ref="eMoreAddress" eMoreAddress={eMoreAddress} eMoreShowType={eMoreShowType}/>
                </WeaSearchGroup>
            </WeaDialog>
        );
    }

    getButtons() {
        let buttons = [];
        buttons.push(<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@atux0b`} type="primary" onClick={this.onOk}>{getLabel(826, '确定')}</Button>);
        buttons.push(<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@qm2mta`} type="ghost" onClick={this.onCancel}>{getLabel(31129, '取消')}</Button>);
        return buttons;
    }

    onOk() {
        if (!this.state.title||this.state.showContent==undefined) {
            message.warning(getLabel(15859, '必要信息不完整！'));
        } else {
            const eMoreAddress = this.refs['eMoreAddress'] ? this.refs['eMoreAddress'].getSaveValues() : {};
            this.props.onOk({...this.state, ...eMoreAddress});
        }
    }

    onCancel() {
        this.props.onCancel();
    }
}

export default Content_1_DataSource;